<div
  style="position: relative;background: white;width: 1200px;padding: 24px 0;left: calc(50% - 600px)">
  <div class="templateNameRow">
    <input nz-input placeholder="模版名称" [maxLength]="50" [disabled]="readonly&&!refModify"
           [(ngModel)]="template.templateName"/>
    <span class="textLengthTip">{{template.templateName.length}}/50</span>
  </div>
  <div class="templateRemarkRow">
  <textarea rows="4" placeholder="模版备注" nz-input [maxlength]="100" [disabled]="readonly&&!refModify"
            [(ngModel)]="template.templateRemark"></textarea>
    <span class="textLengthTip">{{template.templateRemark.length}}/100</span>
  </div>


  <div cdkDropList class="questionContent" (cdkDropListDropped)="dropQuestion($event)">
    <div class="questionRow noEdit" *ngFor="let item of questionList;let questionIndex=index"  [cdkDragDisabled]="readonly" cdkDrag>
      <!--      题目拖拽按钮-->
      <img *ngIf="!readonly" class="rowDragIcon" src="../../../../../assets/images/dragQuestion.svg" alt=""
           cdkDragHandle>

      <div (mouseenter)="filterAvailableJumpQuestion(questionIndex)" cdkDropList
           (cdkDropListDropped)="dropOption($event,questionIndex)">
        <!--        题目名称-->
        <div>
          <b>
            {{questionIndex + 1}}.{{item.questionName}} <span *ngIf="item.isRequired" style="color: red">*</span>
          </b>
        </div>
        <!--        选项列表-->
        <div class="item" *ngFor="let option of item.options;let optionIndex=index" cdkDrag>
          <div class="nameRow">
            <label *ngIf="item.selectType===0" nz-radio [nzDisabled]="true"></label>
            <label *ngIf="item.selectType===1" nz-checkbox [nzDisabled]="true"></label>
            <span class="name" [nzTooltipTitle]="option.optionName" nzTooltipPlacement="topCenter"
                  nz-tooltip>{{option.optionName}}</span>
            <!--选项拖拽按钮-->
            <img *ngIf="!readonly||refModify" class="optionDragIcon" src="../../../../../assets/images/dragOption.svg"
                 cdkDragHandle>
            <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
               nzType="question-circle" (click)="showOptionRemarkModal(item,option,$event)"
               nzTheme="outline"></i>
            <span class="jump" [ngStyle]="{display: option.questionId?'inline-block':''}"
                  *ngIf="item.selectType===0&&questionIndex!==questionList.length-1">
              <!--              没有选择跳转的题目时渲染-->
                <nz-select style="width: 200px;opacity: .6" [(ngModel)]="option.questionId" nzSize="small"
                           [nzBackdrop]="true"
                           *ngIf="!option.questionId&&!readonly"
                           [nzPlaceHolder]="'请选择要跳转的题目'">
                  <nz-option [nzValue]="item.id" *ngFor="let item of availableJumpIndexList"
                             [nzLabel]="item.originalIndex+1+'.'+item.questionName"></nz-option>
                </nz-select>
              <!--              已选择跳转的题目时渲染-->
              <span *ngIf="option.questionId" class="grayText">选中此项后跳转到：</span>
                <span *ngIf="option.questionId" class="optionLink">
<!--                  <span-->
                  <!--                    class="name">{{getQuestionIndexAndName(option.questionId)}}</span>-->
                  <nz-select class="linkSelect" [(ngModel)]="option.questionId" nzSize="small" [nzBackdrop]="true"
                             [disabled]="readonly"
                             [nzPlaceHolder]="'请选择要跳转的题目'">
                  <nz-option [nzValue]="item.id" *ngFor="let item of availableJumpIndexList"
                             [nzLabel]="item.originalIndex+1+'.'+item.questionName"></nz-option>
                </nz-select>
                </span>
              <!--              清除关联的题目-->
                  <button *ngIf="option.questionId&&!readonly" nzSize="small" nzDanger nz-button nzType="default"
                          style="margin-right: 8px" (click)="option.questionId = null">解除跳转</button>
              </span>
          </div>
          <div
            style="margin-left: 22px;color: rgba(0,0,0,.3)">{{option.selectAble ? '可选' : '不可选'}} {{option.used ? '二手机' : '准新机'}}</div>
          <div *ngIf="!option.selectAble"
               style="margin-left: 22px;color: rgba(0,0,0,.3)">不可选原因：{{option.invalidCause}}</div>
        </div>
        <!--        操作按钮-->
        <div class="editBtnArea">
          <button nzSize="small" nzDanger nz-button nzType="default" *ngIf="isBaseModify&&!readonly"
                  nz-popconfirm
                  nzPopconfirmTitle="确认要删除这个题目吗"
                  (nzOnConfirm)="removeQuestion(questionIndex,item.id)"
                  nzPopconfirmPlacement="left"><i nz-icon nzType="delete"></i></button>
        </div>
      </div>

    </div>
  </div>


  <div class="addQuestion" (click)="showPickQuestionModal()" *ngIf="isBaseModify&&!readonly">+添加题目</div>
  <div class="flexRow" style="justify-content: flex-end">
    <button nzDanger nz-button nzType="default" style="margin-right: 8px" (click)="back()">取消</button>
    <button nz-button nzType="primary" style="margin-right: 8px" *ngIf="previewAndSaveBtnVisible()"
            (click)="showPreviewModal()">预览
    </button>
    <button nz-button nzType="primary" style="margin-right: 8px"
            *ngIf="previewAndSaveBtnVisible()&&(!readonly||refModify)"
            (click)="submitTemplate()">保存模版
    </button>
  </div>
</div>

<app-preview-assess-price-template *ngIf="previewAssessPriceVisible" [visible]="previewAssessPriceVisible"
                                   (visibleChange)="previewAssessPriceVisible=!previewAssessPriceVisible"
                                   [questionList]="questionList"></app-preview-assess-price-template>

<!--选择题目-->
<nz-modal [(nzVisible)]="pickQuestion.visible" nzTitle="添加题目" [nzMaskClosable]="false" nzWidth="1000px"
          (nzOnCancel)="hidePickQuestionModal()">
  <div *nzModalContent>
    <div class="questionModalQ">
      <span>
      <span>题目</span>
      <nz-select class="linkSelect" [(ngModel)]="pickQuestion.questionId" [nzBackdrop]="true" nzShowSearch style="width: 600px"
                 (ngModelChange)="pickQuestionChange()"
                 [nzPlaceHolder]="'请选择要添加的题目'">
        <nz-option [nzValue]="item.id" *ngFor="let item of questionOptions"
                   [nzDisabled]="questionOptionDisabled(item.id)"
                   [nzLabel]="item.questionName+' 内部名称：'+item.internalName"></nz-option>
      </nz-select>
      <span *ngIf="pickQuestion.questionId">{{pickQuestion.selectType === 1 ? '多选' : '单选'}}</span>
      <span *ngIf="pickQuestion.questionId">{{pickQuestion.isRequired === 1 ? '必选' : '非必选'}}</span>
      </span>
      <span *ngIf="pickQuestion.questionId">
        <a routerLink="/aisi-recyc/assessPriceQuestionEdit"
           [queryParams]="{id:pickQuestion.questionId}"
           target="_blank">设置</a>
        <a (click)="refreshQuestionOptions()">刷新</a>
      </span>
    </div>
    <div *ngIf="checkedQuestion?.recycleEvalOptions.length"
         style="border-bottom: 1px solid rgba(0,0,0,.3);padding-bottom: 8px">
      <label nz-checkbox [ngModel]="optionCheckedIds.size === checkedQuestion?.recycleEvalOptions.length"
             [nzIndeterminate]="optionCheckedIds.size>0 && optionCheckedIds.size<checkedQuestion?.recycleEvalOptions.length"
             (nzCheckedChange)="optionCheckStatus()">
        {{optionCheckedIds.size === checkedQuestion?.recycleEvalOptions.length ? '取消全选' : '全选'}}
      </label>
    </div>
    <div class="optionRow" *ngFor="let option of checkedQuestion?.recycleEvalOptions">
      <label nz-checkbox
             [ngModel]="optionCheckedIds.has(option?.id)"
             (nzCheckedChange)="optionCheckedChange(option.id)">
        {{option.optionName}}
        <i *ngIf="option.optionRemark||option.optionImages.length" nz-icon
           nzType="question-circle"
           (click)="showOptionRemarkModal(checkedQuestion.recycleEvalOptions,option,$event)"
           nzTheme="outline">
        </i>
        <span style="color: #666666;margin-left: 8px">
          {{option.selectAble ? '可选' : '不可选'}} {{option.used ? '二手机' : '准新机'}}
        </span>
        <br>
        <span style="color: red" *ngIf="!option.selectAble"> 不可选原因：{{option.invalidCause}}</span>
      </label>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hidePickQuestionModal()">关闭</button>
    <button nz-button nzType="primary" (click)="addQuestion()">保存</button>
  </div>
</nz-modal>

<!--<app-preview-option-img-remark [visible]="optionRemark.visible" [question]="optionRemark.question" [option]="optionRemark.option"-->
<!--                               (visibleChange)="optionRemark.visible=false"></app-preview-option-img-remark>-->
